<template>
    <div class="ftLayout">
        <div class="videosBox">
            <p v-for="(item,index) in list" :key="item.id" :class="afterNum * 3 <= index?'moreVideos':''">
                <template v-if="item.goto === 'av'">
                    <video-item
                        :bvid="item.bvid"
                        :id="item.id"
                        :cid="item.cid"
                        :owner="item.owner"
                        :duration="item.duration"
                        :title="item.title"
                        :stat="item.stat"
                        :rcmd_reason="item.rcmd_reason"
                        :pubdate="item.pubdate"
                        :pic="item.pic"
                    ></video-item>
                </template>
                <template v-else-if="item.goto === 'ad'">
                    <ad-item
                        :title="item.business_info.title"
                        :pic="item.business_info.pic"
                        :name="item.business_info.adver_name"
                    ></ad-item>
                </template>
                <template v-else-if="item.goto === 'live'">
                    <live-item
                        :bvid="item.bvid"
                        :id="item.id"
                        :cid="item.cid"
                        :title="item.title"
                        :stat="item.stat"
                        :pic="item.pic"
                        :room_info="item.room_info"
                        :owner="item.owner"
                    ></live-item>
                </template>
            </p>
        </div>
        <div class="afterBox">
            <p v-for="item in afterNum" :key="item">
                <after-box></after-box>
            </p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onBeforeMount,ref } from 'vue'
import { rcmd } from '@/configs/dropLoadViode'
import { get } from '@/http/axios'
import afterBox from './afterBox.vue'
import { videoItem,adItem,liveItem } from '../components'

onBeforeMount(() => {
    initData()
})
let list = ref()
let afterNum = ref<number>(3)
function initData() {
    get(rcmd).then(res => {
        if (list.value) {
            afterNum.value += 3
            list.value = [...list.value,...res.data.item]
            return
        }
        list.value = res.data.item
    }).catch(err => {
        alert('下拉刷新视频加载错误,去官网查/x/web-interface/wbi/index/top/feed/rcmd 更新即可');
    })
}
defineExpose({
    initData
})
</script>

<style lang="scss" scoped>
@media  screen and (min-width: 0) and (max-width: 1400px){
    .videosBox{
        width: calc(((100% - 20px * 3) / 4) * 3 + 20px * 2);
        & p{
            width: calc(( 100% - 20px * 2 ) / 3 );
            height: 210px;
        }
    }
    .afterBox{
        width: calc((100% - 20px * 3) / 4);
        & p{
            height: 210px;
        }
    }
    .moreVideos{
        display: none !important;
    }
}
@media  screen and (min-width: 1400px) and (max-width: 1600px){
    .videosBox{
        width: calc(((100% - 20px * 4) / 5) * 4 + 20px * 3);
        & p{
            width: calc(( 100% - 20px * 3 ) / 4 );
            height: 220px;
        }
    }
    .afterBox{
        width: calc((100% - 20px * 4) / 5);
        & p{
            height: 220px;
        }
    }
}
@media  screen and (min-width: 1600px) and (max-width: 100vw){
    .videosBox{
        width: calc(((100% - 20px * 4) / 5) * 4 + 20px * 3);
        & p{
            width: calc(( 100% - 20px * 3 ) / 4 );
            height: 260px;
        }
    }
    .afterBox{
        width: calc((100% - 20px * 4) / 5);
        & p{
            height: 260px;
        }
    }
}
p{
    padding: 0;
    margin: 0;
}
.ftLayout{
    margin-top: 35px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.videosBox{
    display: flex;
    flex-wrap: wrap;
    gap: 40px 20px;
}
.afterBox{
    display: flex;
    flex-direction: column;
    gap: 40px 20px;
}
</style>